
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { PlusOutlined, OrderedListOutlined, LoadingOutlined } from '@ant-design/icons';
import { Button, Pagination, Drawer } from "antd";
import { useNavigate, useLocation } from "react-router-dom";

import { FlowProject, qiniuGetUrl } from '../../../../services';
import { flowGetProjects } from '../../../../services/flow';
import { CategoryList } from '../../../../components';

export interface FlowProjectGridItemProps {
    style?: CSSProperties;
    item: FlowProject;
    onDoubleClick?: (item: FlowProject) => Promise<void>;
    onClick?: (item: FlowProject) => Promise<void>;
    onAction?: (action: string, item: FlowProject) => Promise<void>;
}

const FlowProjectGridItem: React.FC<FlowProjectGridItemProps> = (props: any) => {

    const [url, setUrl] = useState<string | null>(null);

    useEffect(() => {
        //
        if (!props.item.icon || props.item.icon === '') return;
        qiniuGetUrl([props.item.icon]).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setUrl(url[0]);
            }
        });
    }, [props.item.icon]);

    return (
        <ItemContainer
            style={props.style}
            onDoubleClick={async () => {
                props.onDoubleClick && await props.onDoubleClick(props.item)
            }}
            onClick={async () => {
                props.onClick && await props.onClick(props.item)
            }}
        >
            {
                !url && <IconContainer><LoadingOutlined /></IconContainer>
            }
            {
                url && <Icon src={url} />
            }

            <ItemCenter>
                <Title>{props.item.name}</Title>
                <Description>{props.item.description}</Description>
            </ItemCenter>
            <Buttons>
                <Button style={{ width: '60px', height: '24px' }} type={'primary'} size={'small'} onClick={async () => {
                    props.onAction && props.onAction('edit', props.item);
                }}>编辑</Button>
                <Button style={{ width: '60px', height: '24px' }} size={'small'} onClick={async () => {
                    props.onAction && props.onAction('', props.item);
                }}>详情</Button>
            </Buttons>
        </ItemContainer>
    );
}

export interface FlowGridProps {
    style?: CSSProperties;
    tag: string;
}


export const FlowProjectGrid: React.FC<FlowGridProps> = (props) => {

    const [projects, setProjects] = useState<Array<FlowProject>>([]);

    const [selected, setSelected] = useState<FlowProject | null>(null);

    const [loading, setLoading] = useState<boolean>(false);

    const [pageSize, setPageSize] = useState<number>(20);

    const [page, setPage] = useState<number>(1);

    const [total, setTotal] = useState<number>(0);

    const navigate = useNavigate();

    const refresh = async (tag: string, page: number, pageSize: number) => {
        //
        setLoading(true);
        try {
            let res = await flowGetProjects(page, pageSize, [tag]);
            setProjects(res.data);
        } catch (error) {
            console.error(error);
        }
        setLoading(false);
    };
    //
    useEffect(() => {
        refresh(props.tag, page, pageSize);
    }, [props.tag, page, pageSize]);

    return (
        <Container style={props.style}>
            <Grid>
                {
                    loading && (<></>)
                }
                {
                    !loading && projects && projects.map((item, index) => {
                        return (
                            <FlowProjectGridItem
                                key={index}
                                item={item}
                                style={{
                                    width: '260px',
                                    height: '90px'
                                }}
                                onAction={async (action, item) => {
                                    setSelected(item);
                                    if (action === 'edit') {
                                        navigate(`/data/dataflow/editor/${encodeURIComponent(item.path)}/${encodeURIComponent('/data/dataflow')}`);
                                    }
                                }}
                                onDoubleClick={async (item) => {
                                }}
                            ></FlowProjectGridItem>
                        );
                    })
                }
            </Grid>
            {
                total > pageSize && <Footer>
                    <Pagination
                        showSizeChanger={true}
                        defaultCurrent={page}
                        current={page}
                        pageSize={pageSize}
                        total={total}
                        onChange={(page, pageSize) => {
                            setPage(page);
                        }}
                        onShowSizeChange={(current, size) => {
                            setPageSize(size);
                        }}
                    ></Pagination>
                </Footer>
            }
        </Container>
    );
}

const Container = styled.div`
    flex:1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
`;

const Grid = styled.div`
    flex:1;
    width: 100%;
    overflow: auto;
    padding: 10px;
    display: flex;
    gap:10px;
`;

const Footer = styled.div`
    height: 48px;
    width: 100%;
    padding: 10px;
    background-color: #FFFFFF;
`;


const ItemContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #FFFFFF;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 10px;
`;

const IconContainer = styled.div`
    border-radius: 6px;
    width: 60px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #ff7875;
`;

const Icon = styled.img`
    border-radius: 6px;
    width: 60px;
    height:60px;
`;

const ItemCenter = styled.div`
    flex:1;
    padding: 0 6px;
`;

const Title = styled.div`
    font-size: 16px;
    font-weight: bolder;
    line-height: 26px;
`;

const Description = styled.div`
    font-size: 10px;
    color: #999999;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical; 
`;

const Buttons = styled.div`
    width: 65px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
`;